<template>
  <div>
    <el-container>
      <el-header class="homeHeader">
        <div class="title">
          SL短链接管理系统
        </div>
          <el-menu
                  router
                  class="el-menu-demo"
                  mode="horizontal"
                  background-color="#88888b"
                  text-color="#fff"
                  active-text-color="#ffd04b">
              <el-menu-item index="UserHome"><i class="el-icon-s-home" style="color: #d7d5cd"></i>首页</el-menu-item>
              <el-menu-item index="Member"><i class="el-icon-s-custom" style="color: #d7d5cd"></i>生成链接</el-menu-item>
              <el-menu-item index="User"><i class="el-icon-link" style="color: #d7d5cd"></i>链接管理</el-menu-item>
          </el-menu>
        <div><i class="el-icon-s-custom"></i>{{this.username}}</div>
        <el-dropdown class="userInfo" @command="commandHander">
            <span class="el-dropdown-link">
              选项<i></i>
            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="setting">设置</el-dropdown-item>
            <el-dropdown-item command="logout">注销登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!=='/HomePage'">
            <el-breadcrumb-item :to="{ path: '/UserHome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ this.$router.currentRoute.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="homeWelcome" v-if="this.$router.currentRoute.path=='/UserHome'">
            <PointChart>点图</PointChart>
            <PieChart>饼图</PieChart>

          </div>
          <el-form>
            <el-form-item>


            </el-form-item>
          </el-form>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import PointChart from "../ChartPage/PointChart";
import PieChart from "../ChartPage/PieChart";

export default {
  name: "UserHome",
  components:{'PointChart':PointChart,'PieChart':PieChart},
  data(){
    return{
      username: '',
      user: window.sessionStorage.getItem('user')
    }
  },
  computed:{
    routes(){
      return this.$store.state.routes;
    }
  },

  methods:{
    commandHander(command){
      if(command=='logout'){
        this.$confirm('此操作将注销登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //注销登录
          this.postRequest('/logout');
          //清空用户信息
          window.sessionStorage.removeItem('tokenStr');
          window.sessionStorage.removeItem('user');
          this.$store.commit('initRoutes',[]);
          this.$router.replace('/home');
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });

      }
    },
    getUserM(){
      var username= window.sessionStorage.getItem("username");
      this.username = username;
    },
  },
  mounted() {
    this.getUserM();
  }
}
</script>

<style>
.homeHeader{
  background: #409eff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
}
.homeHeader .title{
  font-size: 20px;
  font-family: 华文楷体;
  color: wheat;
}

.homeHeader .userInfo{
  cursor: pointer;
}

.homeWelcome{
  text-align: center;
  font-size: 30px;
  font-family: 华文楷体;
  color: #409eff;
  padding-top: 50px;
}
</style>